<template>
  <div class="slot-box">
    <div class="top-section">
      <slot name="head" :count="count"></slot>
    </div>
    <div class="content-section">
      <div class="left-section">
        <slot name="left-content"></slot>
      </div>
      <div class="right-section">
        <slot></slot>

      </div>
    </div>
    <div class="bottom-section">
      <slot name="bottom">这里是默认的底部插槽</slot>
    </div>
  </div>
</template>

<script>
// import Back from '../../components/Back.vue'
export default {
  name: 'SlotBox',
  components:{
    // Back
  },
  data(){
    return {
      count: 190
    }
  },
  created(){
  },
  methods:{
  }
}
</script>

<style>
.slot-box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.top-section,
.content-section,
.bottom-section{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-section,
.bottom-section{
  height: 100px;
  background-color: blueviolet;
}
.content-section{
  flex:1;
}
.left-section{
  flex:1;
  height: 100%;
  background-color: chocolate;
}
.right-section{
  height: 100%;
  flex:2;
  background-color: darkred;
}
</style>